<template>
  <div class="box" ref="echartDom"></div>
</template>

<script setup lang="ts">
import {inject, ref, reactive, shallowRef, onMounted, onUnmounted, watchEffect, defineEmits, defineExpose} from "vue";
import { pxToRem } from "@/utils/index";

// 接收参数
const props = defineProps({
  housingSupplyStatsData: {
    type: Object,
    default: () => {},
  },
  type: {
    type: Number,
    default: "",
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  }
});
// 数据定义
const chartsData = reactive<any>({
  legendData: [],
  xAxisData: [],
  yAxisData: [],
  seriesData: [],
});
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
const emit = defineEmits(["fullScTime"]);

// echarts初始化渲染
chartsData.legendData = props.housingSupplyStatsData.legendData;
chartsData.xAxisData = props.housingSupplyStatsData.xAxisData;
chartsData.yAxisData = props.housingSupplyStatsData.yAxisData;
chartsData.seriesData = props.housingSupplyStatsData.seriesData;
const colors = props.housingSupplyStatsData.colors;
const typeData = props.housingSupplyStatsData.typeData;
const legendSty = props.housingSupplyStatsData.legendStyle;
const gridSty = props.housingSupplyStatsData.gridConfig;

const getEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    // 提示框文字样式
    const tooltipTextStyle = {
      color: "#fff",
      fontSize: pxToRem(18),
    };

    // 提示框背景
    const tooltipBackgroundColor = "rgba(8, 64, 132, 0.9)";

    // 图例配置
    const legendStyle = {
      show: legendSty.show,
      icon: legendSty.icon,
      left: legendSty.right ? "auto" : pxToRem(legendSty.left),
      right: pxToRem(legendSty.right),
      top: pxToRem(legendSty.top),
      itemWidth: pxToRem(legendSty.itemWidth),
      itemHeight: pxToRem(legendSty.itemHeight),
      itemGap: pxToRem(legendSty.itemGap),
      textStyle: {
        color: "#fff",
        fontSize: pxToRem(12),
        rich: {},
        padding: [0, 0, pxToRem(-3), 0],
      },
      data: chartsData.legendData,
    };

    // 网格区域
    const gridConfig = {
      left: gridSty.left,
      right: gridSty.right,
      bottom: gridSty.bottom,
      top: gridSty.top,
      containLabel: true,
    };
    const dataZoom = {
      type: "slider",
      start: 0,
      end: 100,
      height: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 10 : 30),
      bottom: props?.dialogData?.fontSizeTimes === 1 ? (props.type == 2 ? pxToRem(40) : pxToRem(10)) : pxToRem(30),
    };

    // x轴配置
    const xAxisConfig = {
      boundaryGap: true,
      data: chartsData.xAxisData,
      axisTick: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: "#FFFFFF",
          fontSize: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 12 : 24),
        },
      },
    };

    // y轴配置
    const yAxisConfig = chartsData.yAxisData.map((item: any) => ({
      type: "value",
      name: item.name,
      nameTextStyle: {
        color: "#ffffff",
        fontSize: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 12 : 24),
      },
      nameGap: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 10 : 30),
      splitLine: {
        show: item.type == 2 ? false : true,
        lineStyle: {
          color: "#31679C",
          type: "dashed",
        },
      },
      axisLabel: {
        formatter: "{value}",
        color: "#ffffff",
        fontSize: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 12 : 24),
      },
    }));

    // 数据项配置
    const seriesConfig = chartsData.seriesData.map((data: any, index: string | number) => ({
      name: chartsData.legendData[index],
      type: typeData[index].name,
      barWidth: "28%", // 设置为类目宽度的50%
      data: data,
      symbol: "none",
      smooth: true,
      stack: typeData[index].stack == 2 ? "account" : null,
      yAxisIndex: typeData[index].type == 2 ? 1 : 0,
      areaStyle:
        typeData[index].areaStyleType == 2
          ? {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: colors[index].a, // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: colors[index].b, // 100% 处的颜色
                  },
                ],
              },
            }
          : null,
      itemStyle: {
        color: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          type: "linear",
          global: false,
          colorStops: [
            {
              offset: 0,
              color: colors[index].a,
            },
            {
              offset: 1,
              color: colors[index].b,
            },
          ],
        },
      },
    }));
    // 渲染图表数据
    const option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "line",
        },
        textStyle: tooltipTextStyle,
        backgroundColor: tooltipBackgroundColor,
      },
      dataZoom: dataZoom,
      legend: legendStyle,
      grid: gridConfig,
      xAxis: xAxisConfig,
      yAxis: yAxisConfig,
      series: seriesConfig,
    };
    myChart.value.setOption(option);
    myChart.value.getZr().on("click", () => {
      emit("fullScTime", props.housingSupplyStatsData.yAxisData[0].name);
    });
  }
};
const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  chartsData.legendData = props.housingSupplyStatsData.legendData;
  chartsData.xAxisData = props.housingSupplyStatsData.xAxisData;
  chartsData.yAxisData = props.housingSupplyStatsData.yAxisData;
  chartsData.seriesData = props.housingSupplyStatsData.seriesData;
  getEchart();
};

defineExpose({
  updateChart
})

watchEffect(() => {
  updateChart();
});

onMounted(() => {
  getEchart();
  window.addEventListener("resize", updateChart);
});

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
});
</script>
<style scoped lang="less">
.h150 {
  height: 150px;
}
.dialog-h150 {
  width: 1120px;
  height: 500px;
}
.h173 {
  height: 173px;
}
.dialog-h173 {
  width: 1120px;
  height: 500px;
}
</style>
